import React, { useEffect, useState } from 'react';
import { Pagination } from 'antd';
import UserListForm from './components/UserListForm';

export default function App() {
  // 用于请求的数据
  const [passData, setPassData] = useState({
    current: 1,
    pageSize: 10,
    phone: '',
    userName: '',
  });
  // 用于显示列表的数据
  const [listData, setListData] = useState({ total: 100, list: [] });

  // 提交方法··
  function handleFormSubmit(formData: { username: string; phone: string }) {
    const dataResult = { ...passData, ...formData };
    setPassData(dataResult);
    getData(dataResult);
  }
  function handleFormChange(formData) {
    const dataResult = { ...passData, ...formData };
    setPassData(dataResult);
  }
  // 搜索列表的方法
  function getData(data: any) {
    console.log('传入的参数', data);
  }
  // 页面改变的方法
  function handlePageChange(current: number, pageSize: number) {
    const dataResult = { ...passData, current, pageSize };
    setPassData(dataResult);
    getData(dataResult);
  }
  useEffect(() => {
    getData(passData);
  }, []);
  return (
    <div>
      <h1>用户列表</h1>
      <UserListForm
        handleFormSubmit={(formData) => handleFormSubmit(formData)}
        handleFormChange={(formData) => handleFormChange(formData)}
        onFinish={handleFormSubmit}
      />
      <Pagination
        total={listData.total}
        onChange={(page, pageSize) => handlePageChange(page, pageSize)}
        {...passData}
      />
    </div>
  );
}
